<!--主页-->
<template>
  <el-container style="calc(100vh)">
    <el-aside class="left">
      <div class="left_f1">
        <div>
          <div style="width: 80%;margin: 0px auto">
            <div style="float:left; size: 60px">
              <svg class="icon" color="#fff" width="50" height="50" viewBox="0 0 1024 1024"
                   xmlns="http://www.w3.org/2000/svg" data-v-042ca774="">
                <path fill="currentColor"
                      d="M628.736 528.896A416 416 0 01928 928H96a415.872 415.872 0 01299.264-399.104L512 704l116.736-175.104zM720 304a208 208 0 11-416 0 208 208 0 01416 0z"></path>
              </svg>
            </div>
            <div style="float: left ; margin-left: 10px;margin-top: 5px;">
              <div style="font-size: 18px">账号: {{ username }}</div>
              <div style="color: #ababab;font-size: 15px;">权限等级: {{ level }}</div>
            </div>
          </div>
          <div>
            <!--          列表-->
            <el-aside class="aside">
              <ul style="padding: 0px">
                <router-link v-for="(user) in this.ms" :to="user.url" class="aside_li">
                  <li class="link">
                    {{ user.name }}
                  </li>
                </router-link>
              </ul>
            </el-aside>
          </div>
        </div>
      </div>
    </el-aside>
    <el-main class="right">
      <el-header class="right_header">
        <h1 style="margin: 0px">某某高校学生成绩管理系统</h1>
        <div class="right_header_right">
          <span>你好，{{ username }} | </span>
          <span><a href="/" class="tc">退出</a></span>
        </div>
      </el-header>
      <el-main class="right_main">
        <div style="height: 100%;width: 100%;background-color: #fff">
          <router-view/>
        </div>
      </el-main>
    </el-main>
  </el-container>
</template>

<script>


import {LevelJudge} from "@/components/function/LevelJudge";
import {LoginJudge} from "@/components/function/LoginJudge";
import {Avatar, Lock} from '@element-plus/icons-vue';

export default {
  name: "index",
  data() {
    return {
      username: this.$store.state.username,
      level: LevelJudge(this.$store.state.level),
      ms: null
    }
  },
  mounted() {
    LoginJudge();
    this.demo();
  },
  methods: {
    demo() {
      if (this.$store.state.level == 0) {
        // 管理员：查看所有用户信息、查看所有学生信息、查看所有教师信息、查看所有成绩信息、创建用户信息、个人中心
        this.$data.ms = [
          {
            name: "查看所有用户信息", url: '/ListUser', icon: '01'
          }, {
            name: "查看所有学生信息", url: '/showstudent', icon: '01'
          }, {
            name: "查看所有教师信息", url: '/showTeacher', icon: '01'
          }, {
            name: "查看所有成绩信息", url: '/ListResults', icon: '02'
          }, {
            name: "创建用户信息", url: '/createUser', icon: '03'
          }, {
            name: "个人中心", url: '/UserDate', icon: '04'
          }
        ]
      } else if (this.$store.state.level == 1) {
        // 教师：查看所在班级所有学生信息、查看所在班级学生成绩、创建学生信息、创建学生成绩、个人中心
        this.$data.ms = [
          {
            name: "查看所在班级所有学生信息", url: '/showclassstudent', icon: '01'
          }, {
            name: "查看所在班级学生成绩", url: '/showgradeallresults', icon: '02'
          }, {
            name: "创建学生信息", url: '/createstudent', icon: '02'
          }, {
            name: "创建学生成绩", url: '/createResults', icon: '04'
          }, {
            name: "个人中心", url: '/UserDate', icon: '04'
          }
        ]
      } else {
        // 学生：个人成绩、个人中心
        this.$data.ms = [
          {
            name: "个人成绩", url: '/Achievement', icon: '04'
          }, {
            name: "个人中心", url: '/UserDate', icon: '04'
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
body {
  padding: 0px;
  margin: 0px;
  height: 100%;
}

.left {
  background-color: #303845;
  margin: 0px;
  padding: 0px;
  width: 20%;
  height: calc(100vh);
}

.right {
  background-color: #eef2f5;
  padding: 0px;
  margin: 0px;
  width: 80%;
  height: calc(100vh);
}

.right_header {
  padding: 15px;
  width: 100%;
  height: calc(10vh);
  background-color: #fff;
}

.right_main {
  padding: 20px;
  margin: 0px;
  width: 100%;
  height: calc(85vh);
}

.left_f1 {
  padding: 20px 0px 20px 0px;
  width: 100%;
  height: 80px;
  color: #e0dfdf;
}

.right_header_right {
  float: right;
}

.link {
  color: #e0dfdf;
  border-bottom: solid 1px #404046;
  background-color: #252f3b;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  padding: 0px 20px;
}
.aside{
  width: 100%;
}
.aside :hover{
  background-color: #566e88;
}


</style>